import React, { Component } from 'react'
import { debounce, throttle } from 'lodash'
import typeProps from 'prop-types'

class Left extends Component {

    static defaultProps = {
        i: 0,
        list: []
    }

    static propTypes = {
        i: typeProps.number.isRequired,
        list: typeProps.array.isRequired
    }

    // shouldComponentUpdate(nextProps, nextState) {
    //     if(nextProps.id !== this.props.id) {
    //         return true
    //     }
    //     if(nextProps.list !== this.props.list) {
    //         return true
    //     }
    //     return false
    // }

    clickIndex(index) {
        this.props.clickBtn(index)
    }

    render() { 
        let { list, i } = this.props
        return (
            <div className='left'>
                <ul>
                    {
                        list && list.length ? list.map((item,index) => {
                            return <li className={ i===index ? 'active2' : '' } key={index} onClick={
                                debounce(this.clickIndex.bind(this,index), 500)
                            }>{item.title}</li>
                        }) : ''
                    }
                </ul>
            </div>
        )
    }
}
 
export default Left;